<template>

  <div class="person">
    <h1>情况三: 监视reactive定义的对象数据类型</h1>
    <h2>姓名: {{ person.name }}</h2>
    <h2>年龄: {{ person.age }}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>


</template>

<script setup lang="ts" name = 'FindYou'> // 相当于写了setup() {}
import {ref, watch, reactive} from 'vue'

//----------------数据------------------------
let person = reactive({
  name: 'FindYou',
  age: 21
})

//------------------方法-------------------------
function changeName() {
  person.name = '贾金博'
}

function changeAge() {
  person.age += 1
}

/* 注意reactive不可以整体修改数据 */
function changePerson() {
  Object.assign(person, {name:'李四', age:20}) // 这个属于对象拷贝 地址还是没有改变
} 

//-------------------监视-------------------------
// 监视 对象监视的是地址 数据的地址
watch(person, (newValue, oldValue)=>{
  console.log('person发生了变化', newValue, oldValue); // 因此输出的时候 newValue和oldValue的输出是一样的
}, {deep: true}) // watch的第三个参数 配置对象
</script>

<style scoped >
.person {
  background-color: pink;
}
button {
  margin: 0 5px;
}
</style>